<template>
    <div class="flex-img">
        <div class="el-upload-list el-upload-list--picture-card" v-show="hideShow">
            <div class="el-upload-list__item is-success">
                <img class="flex-img__image" :src="tempFile == '' ? '' : $imgUrl + tempFile">
                <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete">
                        <i class="el-icon-delete" @click.stop="handleRemove()"></i>
                    </span>
                </span>
            </div>
        </div>
        <el-upload
			class="image-uploader"
			:action="uploadUrl"
			:show-file-list="false"
			accept="image/jpeg,image/jpg,image/png"
			:on-success="imageUploadSuccess"
			:before-upload="beforeUpload"
			v-show="!hideShow"
		>
			<i class="el-icon-plus"></i>
        </el-upload>
        <div slot="tip" class="el-upload__tip">支持jpg、png格式，1张上限</div>
    </div>
</template>
<script>
    export default {
		props: ['file'],
        data() {
            return {
                uploadUrl: this.$baseUrl + 'Index/uploadImg',
				tempFile: this.file || '',
            };
        },
        computed: {
            hideShow() {//当图片多于一张的时候，就隐藏上传框
                return this.tempFile === '' ? false : true
            }
        },
		watch: {
			tempFile () {
				return this.tempFile === '' ? false : true
			}
		},
        methods: {
            imageUploadSuccess(response) {
                this.tempFile = response.data
				this.$emit('imageUrl', this.tempFile)
            },
            beforeUpload(file) {
                const imageSize = file.size / 1024 / 1024 < 5
                if (!imageSize) {
                    this.$message.error('上传图片大小不能超过 5MB!')
                }
                return imageSize
            },
            handleRemove() {
                this.tempFile = ''
				this.$emit('imageUrl', '')
            }
        }
    };
</script>

<style scoped>
    .flex-img {
        display: block;
    }	
    .image-uploader {
        background-color: #fbfdff;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        cursor: pointer;
        line-height: 100px;
        vertical-align: top;
        text-align: center
    }

    .image-uploader {
        font-size: 28px;
        color: #8c939d;
    }

    .image-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .flex-img__image {
        width: 100px;
        height: 100px;
        border-radius: 6px;
    }
</style>
<style>
    .disabled {
        display: none;
    }
	.el-upload-list__item:first-child{
		margin-top: 0;
	}
    .el-upload--picture-card {
        height: 100px
    }
	.el-upload-list--picture-card {
	    margin: 0;
	    display: inline-block;
	    vertical-align: top;
	    height: 100px;
	}
    .el-upload-list--picture-card .el-upload-list__item {
        height: 100px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        margin: 0;
        display: inline-block;
    }

    .el-upload-list__item.is-success .el-upload-list__item-status-label {  
    }
    .el-upload-list--picture-card .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }
	.el-upload--text{
		width: 100px;
		height: 100px;
	}
</style>